<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.InputDatePicker</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.dom');
    goog.require('goog.i18n.DateTimeFormat');
    goog.require('goog.i18n.DateTimeParse');
    goog.require('goog.ui.InputDatePicker');
    goog.require('goog.ui.LabelInput');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/datepicker.css">
  <link rel="stylesheet" href="../css/inputdatepicker.css">
  <style>
    div {
      margin: 0 0 1em;
    }
  </style>
</head>
<body>
  <h1>goog.ui.InputDatePicker</h1>

  <div>
    <label for="date-field1">Date Field1:</label><input id="date-field1">
  </div>
  <div>
    <label for="date-field2">Date Field2:</label><span id="date-field2"></span>
  </div>
  <div>
    <label for="date-container"> Label Input Date Field:</label>
    <span id="date-container"></span>
  </div>
  <script>
    var PATTERN = "MM'/'dd'/'yyyy";
    var formatter = new goog.i18n.DateTimeFormat(PATTERN);
    var parser = new goog.i18n.DateTimeParse(PATTERN);

    var idp1 = new goog.ui.InputDatePicker(formatter, parser);
    idp1.decorate(goog.dom.getElement('date-field1'));

    var idp2 = new goog.ui.InputDatePicker(formatter, parser);
    idp2.render(goog.dom.getElement('date-field2'));

    // Use a LabelInput for this one:
    var fieldLabelInput = new goog.ui.LabelInput('MM/DD/YYYY');
    fieldLabelInput.render(goog.dom.getElement('date-container'));

    var idp3 = new goog.ui.InputDatePicker(formatter, parser);
    idp3.decorate(fieldLabelInput.getElement());
  </script>
</body>
</html>
